<template>
  <div class="order-container">
    <div class="order-header">
      <div style="
          color: rgb(255, 248, 29);
          gap: 4px;
          font-weight: 600;
          display: flex;
          align-items: center;
          font-size: 14px;
        " @click="useGoto('user-msg')">
        <img style="height: 32px" :src="systemMsg" alt="systemMsg" />
        <div>系统<br />消息</div>
      </div>
      <div style="color: rgb(242, 184, 110)">
        <span style="font-size: 20px; font-weight: 600">昵称：</span>
        {{ getUserInfo.nickname }}
      </div>
      <div style="
          color: rgb(155, 226, 84);
          gap: 4px;
          font-weight: 600;
          display: flex;
          align-items: center;
          font-size: 14px;
        ">
        <div>24H<br />客服</div>
        <img style="height: 32px" :src="kfImg" alt="systemMsg" />
      </div>
    </div>

    <div class="order-acitons">
      <div style="color: #fff; font-weight: 600; padding: 8px 0">
        距离自动停止接单时间剩余 {{ countDown.houer }} 小时 {{ countDown.min }} 分
        {{ countDown.sec }} 秒
      </div>
      <Button v-if="takeInfo?.endTime <= 0 || takeInfo.takeOrders == '0'" @click="show = true"
        style="font-weight: 700; font-size: 20px" icon="play-circle" color="#00c4ac">开始接单</Button>

      <Button v-else @click="changeTakeStatusFunc" style="font-weight: 700; font-size: 20px" icon="play-circle"
        color="rgb(255,77,79)">停止接单</Button>
      <div class="order-info">
        <div>
          {{ balance.balance + balance.freezeTrade }}
          <div class="red">总余额</div>
        </div>

        <div>
          {{ balance.freezeTrade }}
          <div class="red">交易中</div>
        </div>

        <div>
          {{ balance.balance }}
          <div class="red">可用余额</div>
        </div>
      </div>
    </div>

    <div class="order-footer">
      <div>
        <span style="color: rgb(0, 255, 0)">{{ balance.todayAll }}</span>
        <div class="white">今日总返佣</div>
      </div>

      <div>
        <span style="color: rgb(0, 255, 0)">{{ balance.todayCommission }}</span>
        <div class="white">今日我的返佣</div>
      </div>

      <div>
        <span style="color: rgb(0, 255, 0)">{{ balance.todaySubordinate }}</span>
        <div class="white">今日下级返佣</div>
      </div>
    </div>
  </div>

  <van-popup v-model:show="show" round @click-overlay="show = false">
    <div class="p-4">
      <div class="text-center text-lg font-bold">{{ dialogContent?.text }}</div>
      <div v-html="dialogContent?.content"></div>
      <div class="flex justify-between mt-4">
        <button class="border px-4 py-1 rounded-lg border-white bg-gray-500 text-white" @click="show = false">
          取消
        </button>
        <button class="border px-4 py-1 rounded-lg border-white bg-red-500 text-white" @click="changeTakeStatusFunc">
          我已知晓
        </button>
      </div>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import systemMsg from '@/assets/images/系统消息.png'
import kfImg from '@/assets/images/客服.png'
import { Button } from 'vant'

import { useUserStore } from '@/stores/user'
import { useAppStore } from '@/stores/app'
import { GetReminderApi } from '@/apis/user'
import { onMounted, onUnmounted, ref, watch } from 'vue'
import { useGoto } from '@/router'

const { getUserInfo, refreshBanlce } = useUserStore()
const { getCollectionTime, changeTakeStatus } = useAppStore()

const balance = ref({})
const dialogContent = ref({
  text: '',
  content: ''
})
const takeInfo = ref({
  endTim: 0,
  endTIme: 0,
  takeOrders: '0'
})
const countDown = ref({
  houer: 0,
  min: 0,
  sec: 0
})
let timer = null
const show = ref(false)

function countDownFunc() {
  setTimeout(() => {
    if (takeInfo.value.endTime <= 0 || takeInfo.value.takeOrders == '0') {
      clearTimeout(timer)
      countDown.value = {
        houer: 0,
        min: 0,
        sec: 0
      }
    } else {
      countDown.value.houer = Math.floor(takeInfo.value.endTime / 3600)
      countDown.value.min = Math.floor((takeInfo.value.endTime % 3600) / 60)
      countDown.value.sec = Math.floor(takeInfo.value.endTime % 60)
      takeInfo.value.endTime--
      countDownFunc()
    }
  }, 1000)
}

var refreshtimeout = null
function refresh() {
  refreshtimeout = setTimeout(() => {
    refresh()
    refreshBanlce()
  }, 1500)
}


async function getCollectionTimeFunc() {
  const data = await getCollectionTime()
  takeInfo.value = data
  countDownFunc()
}

async function changeTakeStatusFunc() {
  show.value = false
  await changeTakeStatus()
  await getCollectionTimeFunc()
  countDownFunc()
}

watch(() => getUserInfo.balance, () => {
  balance.value = getUserInfo.balance
})

onMounted(async () => {
  balance.value = getUserInfo.balance
  takeInfo.value = {
    endTim: 0,
    endTIme: 0,
    takeOrders: ''
  }
  refresh()
  getCollectionTimeFunc()
  GetReminderApi({ type: 'app_dialog' }).then((res) => {
    dialogContent.value = res
  })
})

onUnmounted(() => {
  clearTimeout(refreshtimeout)
})
</script>

<style scoped lang="less">
.order-container {
  padding: 0px;

  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .order-acitons {
    background-image: url('@/assets/images/orderAction.png');
    text-align: center;
    background-image: linear-gradient(to top, rgb(223, 175, 197) 0%, rgb(56, 122, 170) 100%);
    margin: 2px 0;
    border-radius: 10px;

    .order-info {
      display: flex;
      justify-content: space-around;
      padding: 10px 0;
      font-weight: 600;

      // 56,122,170
      // 223,175,197
      .red {
        color: rgb(111, 38, 49);
      }
    }
  }

  .order-footer {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 18px;
    text-align: center;

    // 56,122,170
    // 223,175,197
    .red {
      color: rgb(111, 38, 49);
    }

    .white {
      color: white;
    }
  }
}
</style>
